<template>
  <div class="box">
    <!-- 头部区域 -->
    <head-page
      :title="
        $route.query.city +
        ($route.query.item ? '(' + $route.query.item + ')' : '')
      "
      style="border-bottom: 2px solid #dad9df"
      id="backstyle"
    >
    </head-page>
    <!-- 地区区域 -->
    <!-- <div class="area">{{ this.$route.query.city }}(各商会)</div> -->
    <div class="area-center bold-size">
      <!-- <h3 >{{ this.$route.query.i }}</h3> -->
      <!-- 各商会的区域 -->
      <div class="bottom">
        <!-- 省会区域 -->
        <div class="small" v-if="list.length">
          <!-- 内容区域 -->
          <div class="right" v-for="(item, index) in list" :key="index">
            <div class="rows-1">
              {{ getNumber(index + 1) }}、 {{ item.chamberName }}
            </div>
          </div>
        </div>
        <div v-else class="tac c999 m-t-20">暂无数据</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
  selectCofcChamberName,
  selectNameByHaiwai,
  selectChamberNameByNation,
} from "@/api/chambe";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // 获取数据
    // getChamber({
    // 	chamberCity: this.$route.query.i,
    // 	chambertypeId: this.$route.query.typeId
    // }).then((res) => {
    // 	if (res.data.code == 200) {
    // 		this.list = res.data.data
    // 	}
    // })

    if (this.$route.query.city == "海外") {
      //查看海外
      selectNameByHaiwai({
        chamberProvincial: this.$route.query.city,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    } else if (
      sessionStorage.getItem("provincesub") == this.$route.query.citysub
    ) {
      //查看各省商会的标题
      selectCofcChamberName({
        chamberProvincial: this.$route.query.provincial,
        chamberCity: this.$route.query.city,
        chambertypeId: this.$route.query.typeId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    } else {
      //查看国家级和世界华商
      selectChamberNameByNation({
        chambertypeId: this.$route.query.id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    }
  },
  methods: {
    getNumber(str) {
      let num = String(str);
      if (num.length == 1) {
        return "00" + num;
      } else if (num.length == 2) {
        return "0" + num;
      } else {
        return num;
      }
    },
  },
};
</script>
  
  <style scoped>
.box {
  width: 100%;
  /* min-height: 2.78rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 头标区域 */
.top h3 img {
  width: 0.24rem;
  margin-right: 0.05rem;
}
/* 地区区域 */
.area {
  width: 98%;
  height: 0.3rem;
  padding-left: 5px;
  border-bottom: 2px solid #dad9df;
  line-height: 0.3rem;
  font-weight: 700;
}
/* 版心区域 */
.center {
  margin-top: 0.05rem;
  border-radius: 0.1rem;
  background-color: white;
}
h3 {
  text-align: center;
}
/* 各商会区域 */

.small {
  width: 100%;
  height: 0.3rem;
}
.small {
  width: 100%;
  height: 0.2rem;
  margin-bottom: 0.07rem;
}
/* 原点区域 */
.left {
  width: 5.5%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.1rem;
}
.yuan {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
}
/* 内容区域 */
.right {
  width: 94%;
  height: 100%;
  padding: 0.1rem 0.05rem;
  padding-left: 0.05rem;
  font-weight: 700;
}
</style>